<template>
  <div>
    <h3>这是新闻详情</h3>
    <p>获取query传递的值：{{ $route.query.id }}</p>
    <p>获取params传递的值：{{ $route.params.id }}</p>
  </div>
</template>

<script setup>
import { watch } from 'vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query.id);
console.log(route.params.id);
console.log(route.params);

// watch(route, (to)=>{
//   console.log(to.query);
//   console.log(to.params);
// })
// 利用侦听器，检测动态路由数据的变化
watch(()=>route.params.id, (to)=>{
  console.log(to);
})

console.log("---enter---");
console.log(route);

onBeforeRouteUpdate((to, from)=>{
  console.log("-----update----")
  console.log(to);
  console.log(from);
})

onBeforeRouteLeave((to, from)=>{
  console.log("-----leave----")
  console.log(to);
  console.log(from);
})

</script>